<template>
  <div style="padding: 16px">
    <el-descriptions title="新增字典" direction="vertical" :column="2" border>
      <el-descriptions-item label="类别名称">
        <el-input v-model="data.request.name"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="关键字(key)">
        <el-input v-model="data.request.key"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="值(value)">
        <el-input v-model="data.request.value"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="描述">
        <el-input type="textarea" v-model="data.request.explain"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="操作">
        <el-button type="primary" @click="events.add">新增</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

  <script setup lang="ts">
import { Add_Dictionary_type } from "@/api/dictionary/index";
import router from "@/router";
import { close_loading, notice, start_loading } from "@/utils/notice";
import type { Dictionary_Add_Data } from "@/utils/types";
import { reactive } from "vue";

const data = reactive<Dictionary_Add_Data>({
  request: {
    name: "",
    key: "",
    value: "",
    explain: "",
  },
});

const events = {
  async add() {
    start_loading();
    const res = await Add_Dictionary_type({
      name: data.request.name,
      key: data.request.key,
      value: data.request.value,
      explain: data.request.explain,
    });
    close_loading();
    notice(res);
    if (res.code === 0) {
      router.back();
      data.request.name = "";
      data.request.key = "";
      data.request.explain = "";
      data.request.value = "";
    }
  },
};
</script>

  <style scoped></style>
